#@web_layout?()
#define css()
<link rel="stylesheet" type="text/css" href="#(contextPath)/assets/front/web/css/main.css?#(getUUID())" />
<link rel="stylesheet" type="text/css" href="#(contextPath)/assets/front/web/css/layer.css?#(getUUID())" />

<style>
#ul1 {width:660px; position:relative; margin:10px auto;}
#ul1 li {width:200px; height:150px; float:left; list-style:none; margin:10px;}
#ul1 li:hover{ border-color: #9a9fa4; box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.85);}
#ul1 .active{ border:1px dashed red;}

.save-sort-Btn{
	float:right;
	display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    padding: 15px 22px;
    font-size: 12px;
    background-color: #62bcc0;
    color: #fff;
    cursor: pointer;
}
</style>
#end
#define content()
	 <form action="#(contextPath)/platform/task/saveTaskSource" id="sortForm" method="post">
		 <input type="hidden" name="id" value="#(id)">
		<div class="c-article">
			<div class="g-info">
		        <div class="u-title">
		        	设置图片素材排序
		        	<div class="save-sort-Btn" onclick="saveSort()">保存图片排序</div>
		        </div>
	        </div>
		</div>
	    <ul id="ul1">
			 #for(s : sources)
		        <li data-index="#(s.id)">
		        	<input type="hidden" name="#(s.id)" id="source_#(s.id)"value="#(s.sort)"/>
		        	<img src="#(s.source)" width="200" height="150" >
		        </li>
		    #end
		</ul>
	</form>
#end
#define script()
<script type="text/javascript" src="#(contextPath)/assets/front/web/script/drag/move.js"></script>
<script type="text/javascript" src="#(contextPath)/assets/front/web/script/jquery.js"></script>
<script type="text/javascript" src="#(contextPath)/assets/front/web/script/layer.js"></script>

<script>
window.onload = function() {
		var oUl= document.getElementById("ul1");
		var aLi = oUl.getElementsByTagName("li");
		var disX = 0;
		var disY = 0;
		var minZindex = 1;
		var aPos =[];
		for(var i=0;i<aLi.length;i++){
			var t = aLi[i].offsetTop;
			var l = aLi[i].offsetLeft;
			aLi[i].style.top = t+"px";
			aLi[i].style.left = l+"px";
			aPos[i] = {left:l,top:t};
			aLi[i].index = i;
		}
		for(var i=0;i<aLi.length;i++){
			aLi[i].style.position = "absolute";
			aLi[i].style.margin = 0;
			setDrag(aLi[i]);
		}
		//拖拽
		function setDrag(obj){
			obj.onmouseover = function(){
				obj.style.cursor = "move";
			}
			obj.onmousedown = function(event){
				var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
				var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
				obj.style.zIndex = minZindex++;
				//当鼠标按下时计算鼠标与拖拽对象的距离
				disX = event.clientX +scrollLeft-obj.offsetLeft;
				disY = event.clientY +scrollTop-obj.offsetTop;
				document.onmousemove=function(event){
					//当鼠标拖动时计算div的位置
					var l = event.clientX -disX +scrollLeft;
					var t = event.clientY -disY + scrollTop;
					obj.style.left = l + "px";
					obj.style.top = t + "px";
					/*for(var i=0;i<aLi.length;i++){
						aLi[i].className = "";
						if(obj==aLi[i])continue;//如果是自己则跳过自己不加红色虚线
						if(colTest(obj,aLi[i])){
							aLi[i].className = "active";
						}
					}*/
					for(var i=0;i<aLi.length;i++){
						aLi[i].className = "";
					}
					var oNear = findMin(obj);
					if(oNear){
						oNear.className = "active";
					}
				}
				document.onmouseup = function(){
					document.onmousemove = null;//当鼠标弹起时移出移动事件
					document.onmouseup = null;//移出up事件，清空内存
					//检测是否普碰上，在交换位置
					var oNear = findMin(obj);
					if(oNear){
						oNear.className = "";
						oNear.style.zIndex = minZindex++;
						obj.style.zIndex = minZindex++;
						startMove(oNear,aPos[obj.index]);
						startMove(obj,aPos[oNear.index]);
						//交换index
						oNear.index += obj.index;
						obj.index = oNear.index - obj.index;
						oNear.index = oNear.index - obj.index;
						
						var c_index = obj.getAttribute("data-index");
						var c_sortEle= document.getElementById("source_"+c_index);
						c_sortEle.value =obj.index+1;
						
						var n_index = oNear.getAttribute("data-index");
						var n_sortEle= document.getElementById("source_"+n_index);
						n_sortEle.value =oNear.index+1;
							
					}else{
						startMove(obj,aPos[obj.index]);
					}
				}
				clearInterval(obj.timer);
				return false;//低版本出现禁止符号
			}
		}
		//碰撞检测
		function colTest(obj1,obj2){
			var t1 = obj1.offsetTop;
			var r1 = obj1.offsetWidth+obj1.offsetLeft;
			var b1 = obj1.offsetHeight+obj1.offsetTop;
			var l1 = obj1.offsetLeft;

			var t2 = obj2.offsetTop;
			var r2 = obj2.offsetWidth+obj2.offsetLeft;
			var b2 = obj2.offsetHeight+obj2.offsetTop;
			var l2 = obj2.offsetLeft;

			if(t1>b2||r1<l2||b1<t2||l1>r2){
				return false;
			}else{
				return true;
			}
		}
		//勾股定理求距离
		function getDis(obj1,obj2){
			var a = obj1.offsetLeft-obj2.offsetLeft;
			var b = obj1.offsetTop-obj2.offsetTop;
			return Math.sqrt(Math.pow(a,2)+Math.pow(b,2));
		}
		//找到距离最近的
		function findMin(obj){
			var minDis = 999999999;
			var minIndex = -1;
			for(var i=0;i<aLi.length;i++){
				if(obj==aLi[i])continue;
				if(colTest(obj,aLi[i])){
					var dis = getDis(obj,aLi[i]);
					if(dis<minDis){
						minDis = dis;
						minIndex = i;
					}
				}
			}
			if(minIndex==-1){
				return null;
			}else{
				return aLi[minIndex];
			}
		}	
	}
	
	function saveSort(){
		//换成ajax操作
		$.ajax({
        type:"post",
        url:"#(contextPath)/platform/task/saveTaskSource",
        datatype:"json",
        data:$("#sortForm").serialize() ,
        success:function(res){
        	layer.alert("图片排序保存成功");
            return;
        	}
        });
		//document.getElementById("sortForm").submit();
	}
</script>
#end